{include file="common/_meta" /}
<title>栏目列表</title>
<meta name="keywords" content="李志立，lizhilimaster@163.com">
<meta name="description" content="李志立，lizhilimaster@163.com">
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 统计管理 <span
        class="c-gray en">&gt;</span> 概况数据 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
                                              href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">

    <div class="mt-20">
        <h4>1，下方是自己编写的统计。 </h4>

        <div id="main" style="width: 100%;height:400px;"></div>

        <h4>2，下方是51la的统计，也可以去官网访问。
            <a style="color: #0f9ae0" href="https://v6.51.la/" target="_blank">51la v6官网</a>
        </h4>

        <h5 style="color: red">{$f}</h5>

        {if $data}
        <table class="table table-border table-bordered radius table-striped">
            <tr>
                <th>#</th>
                <th>IP数</th>
                <th>浏览量(PV)</th>
                <th>访客数(UV) </th>
                <th>会话数</th>
                <th>跳出率</th>
                <th>平均访问时长</th>
            </tr>
            <tr>
                <th>今日</th>
                <th>{$data.bean.curIp}</th>
                <th>{$data.bean.curPv}</th>
                <th>{$data.bean.curUv}</th>
                <th>{$data.bean.curSv}</th>
                <th>{$data.bean.curBounceRate}</th>
                <th>{$data.bean.curAvgDuration} ms</th>
            </tr>
            <tr>
                <th>昨日</th>
                <th>{$data.bean.beforeIp}</th>
                <th>{$data.bean.beforePv}</th>
                <th>{$data.bean.beforeUv}</th>
                <th>{$data.bean.beforeSv}</th>
                <th>{$data.bean.beforeBounceRate}</th>
                <th>{$data.bean.beforeAvgDuration} ms</th>
            </tr>
            <tr>
                <th>预计今日</th>
                <th>{$data.bean.predictIp}</th>
                <th>{$data.bean.predictPv}</th>
                <th>{$data.bean.predictUv}</th>
                <th>{$data.bean.predictSv}</th>
                <th>无数据</th>
                <th>无数据</th>
            </tr>
            <tr>
                <th>昨日此时</th>
                <th>{$data.bean.yesterdayCurIp}</th>
                <th>{$data.bean.yesterdayCurPv}</th>
                <th>{$data.bean.yesterdayCurUv}</th>
                <th>{$data.bean.yesterdayCurSv}</th>
                <th>{$data.bean.yesterdayCurBounceRate}</th>
                <th>{$data.bean.yesterdayCurAvgDuration} ms</th>
            </tr>
            <tr>
                <th>本月合计</th>
                <th>{$data.bean.monthIp}</th>
                <th>{$data.bean.monthPv}</th>
                <th>{$data.bean.monthUv}</th>
                <th>{$data.bean.monthSv}</th>
                <th>{$data.bean.monthBounceRate}</th>
                <th>{$data.bean.monthAvgDuration} ms</th>
            </tr>
            <tr>
                <th>总流量</th>
                <th>{$data.bean.totalIp}</th>
                <th>{$data.bean.totalPv}</th>
                <th>{$data.bean.totalUv}</th>
                <th>{$data.bean.totalSv}</th>
                <th>{$data.bean.totalBounceRate}</th>
                <th>{$data.bean.totalAvgDuration} ms</th>
            </tr>
            <tr>
                <th>历史峰值</th>
                <th>{$data.bean.topIp}</th>
                <th>{$data.bean.topPv}</th>
                <th>{$data.bean.topUv}</th>
                <th>{$data.bean.topSv}</th>
                <th>{$data.bean.topBounceRate}</th>
                <th>{$data.bean.topAvgDuration} ms</th>
            </tr>
        </table>
        {/if}
    </div>
</div>
{include file="common/_footer" /}
<script src="__MANAGE__lib/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    let date_arr=[];
        {foreach $date_arr as $vo }
            date_arr.push('{$vo}')
        {/foreach}
    let ip_arr=[];
        {foreach $ip_arr as $vo }
            ip_arr.push({$vo})
        {/foreach}
    let pv_arr=[];
        {foreach $pv_arr as $vo }
            pv_arr.push({$vo})
        {/foreach}
    let uv_arr=[];
        {foreach $uv_arr as $vo }
        uv_arr.push({$vo})
        {/foreach}
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['IP', 'UV', 'PV']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date_arr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'IP',
                type: 'line',
                stack: 'Total',
                data: ip_arr
            },
            {
                name: 'UV',
                type: 'line',
                stack: 'Total',
                data: uv_arr
            },
            {
                name: 'PV',
                type: 'line',
                stack: 'Total',
                data: pv_arr
            },
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>





